<template>
  <div>
    <el-form size="large" :model="spuInfo" :rules="rules" ref="basicRef">
      <el-form-item label="商品名称" prop="spuName">
        <el-input placeholder="请输入商品名称" v-model="spuInfo.spuName"></el-input>
      </el-form-item>
      <el-form-item label="商品描述" prop="spuDescription">
        <el-input placeholder="请输入商品名称" v-model="spuInfo.spuDescription"></el-input>
      </el-form-item>
      <el-form-item label="选择分类" prop="categoryId">
        <el-cascader v-model="spuInfo.categoryId" :options="allCategoryList" @visible-change="getCategoryList"
                     :props="cascaderProps" @change="getBrandList"/>
      </el-form-item>
      <el-form-item label="选择品牌" prop="brandId">
        <el-select v-model="spuInfo.brandId">
          <el-option
              v-for="item in brandList"
              :key="item.brandId"
              :label="item.brandName"
              :value="item.brandId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品重量" prop="weight">
        <el-input-number v-model="spuInfo.weight" :precision="2" :step="0.1" :max="1000"/>
      </el-form-item>
      <el-form-item label="商品介绍" prop="introduceImage">
        <el-upload
            class="avatar-uploader"
            :data="introduceImage"
            :action="$upFile"
            :file-list="introduceFileList"
            list-type="picture-card"
            :headers="getHeader"
            name="files"
            :on-success="getintroduceImageId"
        >
          <el-icon class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品图集" prop="Atlas">
        <el-upload
            class="avatar-uploader"
            :action="$upFile"
            :data="atlas"
            :headers="getHeader"
            :on-success="getAtlasImageId"
            list-type="picture-card"
            :file-list="atlasFileList"
            name="files"
        >
<!--          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"-->
          <template #default>
            <el-image :src="item" v-for="(item,index) in atlasFileList" :key="index"
                      style="width: 50px;height: 50px"></el-image>
            <div >
              <el-icon class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
  <div class="foot_class">
    <el-row :gutter="20">
      <el-col :span="3" :offset="6">
        <div>
          <el-button type="primary" disabled>上一步</el-button>
        </div>
      </el-col>
      <el-col :span="3" :offset="4">
        <div>
          <el-button type="success" @click="next(basicRef)">下一步:设置规格参数</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {reactive, ref, defineEmits, defineProps, onMounted,} from "vue";
import {Plus} from '@element-plus/icons-vue'
import {getAllCategoryToTree} from '@/api/home/goods/category'
import {getBrandByCatgoryId} from '@/api/home/brand/brand'
import {getToken} from "@/util/token/tokenUtil";
import {getImageBaseUrl} from "@/util/projectData";

const emits = defineEmits(['pushSpuFromData', 'cateChange'])
const props = defineProps({
  spuInfo: Object
})
let basicRef = ref()
let allCategoryList = ref([])
let brandList = ref([])
const getHeader = {
  token: getToken('token')
}
let introduceImage = {
  bucketName: 'goods',
  folderName: 'introduceImage',
  fileName: '',
  filePath: ''
}
let atlas = {
  bucketName: 'goods',
  folderName: 'atlas',
  fileName: '',
  filePath: ''
}
let atlasFileList = ref([])
let introduceFileList = ref([])
let spuInfo = ref({
  spuName: '',
  spuDescription: '',
  categoryId: '',
  brandId: '',
  weight: 0,
  introduceImage: [],
  atlas: [],
})
const cascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  emitPath: false
}

onMounted(() => {
  spuInfo.value = props.spuInfo
})

function getCategoryList() {
  getAllCategoryToTree().then(res => {
    allCategoryList.value = res.data
  })
}

/**
 * 图集上传成功的回调：获取文件id
 * @param res
 */
function getAtlasImageId(res) {
  spuInfo.value.atlas.push(res.data)
  atlasFileList.value.push(getImageBaseUrl + res.data)
}

function getintroduceImageId(res) {
  spuInfo.value.introduceImage.push(res.data)
  introduceFileList.value.push(getImageBaseUrl + res.data)
}

function getBrandList() {
  getBrandByCatgoryId(spuInfo.value.categoryId).then(res => {
    brandList.value = res.data
  })
  emits('cateChange')
}

function next(r) {
  r.validate(v => {
    if (v) {
      emits('pushSpuFromData', spuInfo.value)/*提交数据给父组件*/
    } else return false
  })
}

onMounted(() => {
  if (spuInfo.value.atlas) {
    spuInfo.value.atlas.forEach(item => {
      atlasFileList.value.push(getImageBaseUrl + item)
    })
  }
  if (spuInfo.value.introduceImage) {
    spuInfo.value.introduceImage.forEach(item => {
      introduceFileList.value.push(getImageBaseUrl + item)
    })
  }
})


/*校验规则*/
const rules = reactive({
  spuName: [
    {required: true, message: '不能为空', trigger: 'blur'},
  ],
  spuDescription: [
    {required: true, message: '不能为空', trigger: 'blur'},
  ],
  categoryId: [
    {required: true, message: '不能为空', trigger: 'blur'},
  ],
  brandId: [
    {required: true, message: '不能为空', trigger: 'blur'},
  ],
  weight: [
    {required: true, message: '不能为空', trigger: 'blur'},
  ],
})

</script>

<style scoped>


.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
